<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body{width: 100%; height: 100%; overflow: hidden;}
        #div1 {width:100px; height:200px; background:red; top:300px; right:-100px; position:absolute;}
        #div1 span{width:20px; height:60px; line-height:20px; top:70px; right:100px; background:yellow; text-align:center; position:absolute;}
    </style>
</head>
<body>
<div id="div1"><span>111</span></div>
</body>
<script>
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        oDiv.style.right = '-100px';
        oDiv.onmouseover = function () {
            startMove(1);
        };
        oDiv.onmouseout = function () {
            startMove(0);
        }
    };
    var timer = null;
    function startMove(iTarget) {
        var oDiv = document.getElementById('div1');
        var speed = 1;
        clearInterval(timer);
        timer = setInterval(function () {
            if(iTarget){
                oDiv.style.right = parseFloat(oDiv.style.right) + speed + 'px';
                if(parseFloat(oDiv.style.right) >= 0){
                    oDiv.style.right = '0';
                    window.clearInterval(timer);
                }
            }else {
                oDiv.style.right = parseFloat(oDiv.style.right) - speed + 'px';
                if(parseFloat(oDiv.style.right) <= -100){
                    oDiv.style.right = '-100px';
                    window.clearInterval(timer);
                }
            }
        }, 1);
    }
</script>
</html>